<template>
  <view class="container">
    <navBar :navbarData.sync="navbarData"></navBar>
    <loading :showLoaded.sync="showLoaded"></loading>
    <view class="activity-list" v-for="(item,index) in menuList" :key="index">
      <view class="content" @click="skipPage(item)">
        <view class="icon">
          <image :src='item.thumbnailUrl' mode="widthFix" @load="stopLoading(index)"></image>
        </view>
        <view class="con-center">
          <view class="title">{{item.name}}</view>
          <view class="intro" v-if="item.activityType == 'Gift'">
            领取时间：{{formatDate(item.fromDate)}}-{{formatDate(item.toDate)}}</view>
          <view class="intro" v-else>{{item.description || ''}}</view>
          <view class="btn-text">{{item.buttonText}}</view>
          <view class="tip" v-if="!item.hasVisited">NEW</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import api from '@/api/api';
  import tip from '@/utils/tip';
  import NavBar from '@/components/common/navbar';
  import Loading from '@/components/common/loading';
  import {
    SYSTEM_INFO,
    USER_INFO,
    CUSTOMER_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  import util from '@/utils/util';
  export default {
    components: {
      navBar: NavBar,
      loading: Loading,
    },
    data() {
      return {
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '我的礼遇',
          hideSearch: true,
          hideHome: false
        },
        menuList: [],
        loading: Loading,
        showLoaded: true,
        nowPages: '',
      }
    },
    onLoad() {
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
    },
    onShow() {
      this.getActivityList()
      getApp().cl_tracker.track('mini_program_view', {
        path: this.nowPages,
        pageName: '我的礼遇',
      })
    },
    methods: {
      stopLoading(index) {
        let lastIndex = index + 1
        if (lastIndex == this.menuList.length) {
          this.showLoaded = false
        }
      },
      formatDate(date) {
        let data = date && date.slice(0, 10)
        let newDate = util.noZeroFormat(data)
        return newDate
      },
      // 获取活动列表
      async getActivityList() {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const res = await api.getActivityList({
          header: {
            jwt: customerInfo.jwt
          }
        });
        if (res.code === 1000) {
          this.menuList = res.data

          res.data && this.menuList.map(item => {
            if (item.activityType == 'Gift') {
              item.buttonText = '查看详情'
            } else if (item.activityType == 'Exclusive_Adviser') {
              item.buttonText = '查看邀请'
            } else if (item.activityType == 'Special_Activity') {
              item.buttonText = '查看活动'

            }
          })
          if (!res.data || res.data.length == 0) {
            this.showLoaded = false
          }
        } else {
          this.showLoaded = false
        }
      },


      skipPage(item) {
        if (!item.hasVisited) {
          this.setVisitActive(item)
        }
        if (item.activityType == 'Gift') {
          this.trackTreatmentList("会员礼品");
          uni.navigateTo({
            url: '/pages/memberGift/giftDetail?id=' + item.activityId
          })
        } else if (item.activityType == 'Exclusive_Adviser') {
          this.trackTreatmentList("专属顾问");
          uni.navigateTo({
            url: '/pages/memberGift/consult?id=' + item.activityId + '&name=' + item.name
          })
        } else if (item.activityType == 'Special_Activity') {

          this.getSpecialInviteInfo(item)

          this.trackTreatmentList("特邀活动");

        }
      },
      //点击礼遇类型跟踪
      trackTreatmentList(type) {
        let eventName = "c_ebmp_click_treatment_list";
        let trackParams = {
          "c_treatment_type": type
        }
        getApp().commonClTrack(eventName, trackParams);
      },
      // 跳转特约活动
      async setVisitActive(item) {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        let memberDetails = uni.getStorageSync('memberDetails') || getApp().globalData.memberDetails;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO) || getApp().globalData.merchantInfo;
        const res = await api.setVisitActive({
          method: 'POST',
          header: {
            jwt: customerInfo.jwt
          },
          query: {
            activityId: item.activityId,
            activityType: item.activityType,
            memberId: memberDetails.memberId,
            merchantId: customerInfo.merchantId,
            storeId: merchantInfo.cloudMerchantStoreId
          }
        });
        if (res.code === 1000) {
          this.getActivityList()
        }
      },
      // 跳转特约活动
      async getSpecialInviteInfo(item) {
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const res = await api.getSpecialInviteInfo({
          header: {
            jwt: customerInfo.jwt
          }
        }, item.activityId);
        if (res.code === 1000) {
          if (res.data.urlType == 1) {
            uni.navigateTo({
              url: '/pages/cms/page?identifier=' + res.data.cmsUrl.url + '&activityName=' + item.name
            })
          } else if (res.data.urlType == 2) {
            uni.navigateToMiniProgram({
              appId: res.data.cmsUrl.appId,
              path: res.data.cmsUrl.url,
              envVersion: 'release',
            });
          }
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;

  }

  .container {
    height: 100%;
    padding-top: 14px;

  }
  view{
    font-family: PingFangSC-Medium, PingFang SC ;
  }
  .activity-list {
    margin: 0px 14px 16px;
    background: #000;
    overflow: hidden;
    // height: 348rpx;

    .content {
      position: relative;
      background: #fff;
      display: flex;
      justify-content: space-between;

      .icon {

        image {
          background: #ccc;
          display: block;
          width: 348rpx;

        }
      }

      .con-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-top: 60rpx;
        background-image: url('https://100000063-1252208446.file.myqcloud.com/images/listbg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          line-height: 44rpx;
          color: #fff;
          margin: 0 40rpx 0;
          background-image: url('https://100000063-1252208446.file.myqcloud.com/images/space.png');
          background-repeat: no-repeat;
          background-size: 100%;
          background-position-y: center;

        }

        .intro {
          font-size: 20rpx;
          color: #fff;
          line-height: 32rpx;
          padding: 0 20rpx;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          max-height: 130rpx;
          overflow: hidden;

        }

        .btn-text {
          width: 192rpx;
          height: 54rpx;
          line-height: 54rpx;
          background: #CB171A;
          color: #fff;
          font-size: 28rpx;
          margin: 0 auto 66rpx;
          letter-spacing: 1.5px;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .tip {
          position: absolute;
          top: 0;
          right: 0;
          width: 92rpx;
          text-align: center;
          color: #503726;
          background-image: url('https://100000063-1252208446.file.myqcloud.com/images/newbg.png');
          background-size: contain;
          background-repeat: no-repeat;
        }
      }

    }
  }
</style>
